<template>
  <div class="h-full subjectAll-box">
    <base-page v-bind="baseInfo">
      <template #searchBar>
        <filter-form ref="filterForm" :elements="elements" :show-reset="true" @submit="submit">
          <template>
            <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
            <el-button icon="el-icon-upload" @click="download">下载模板</el-button>
            <el-upload
              ref="upload"
              action=""
              :show-file-list="false"
              name="file"
              accept=".xls, .xlsx, .XLS, .XLSX"
              class="upload-demo"
              :http-request="uploadChange"
              :on-success="handleSuccess"
              :on-change="handleChange"
            >
              <el-button icon="el-icon-upload2">导入</el-button>
            </el-upload>
            <el-button icon="el-icon-download" @click="exportList">导出</el-button>
          </template>
        </filter-form>
      </template>
      <template #content>
        <div class="table-box">
          <TableNew
            :loading="tableLoading"
            :data="tableData"
            :columns="tableEl"
            :pagination="pagination"
            @paginationChange="paginationChange"
            @rowSelection="rowSelection"
          >
            <template #action="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="top"
                :open-delay="600"
              >
                <i
                  class="el-icon-edit-outline action"
                  @click="editFun(scope.row)"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top"
                :open-delay="600"
              >
                <i
                  class="el-icon-delete action red"
                  @click="removeFun(scope.row)"
                />
              </el-tooltip>
            </template>
          </TableNew>
        </div>
      </template>
    </base-page>
    <Drawer
      :visible="drawerVisible"
      :title="title + '部门对照'"
      width="35%"
      :footer-btns="footerBtns"
      @submit="drawerSubmit"
      @cancel="drawerCancel"
    >
      <template>
        <el-form ref="drawerForm" :model="drawerForm" size="mini" :rules="drawerRules" label-width="110px" class="mx-15 mt-10">
          <el-form-item label="用友子部门" prop="yyDepartmentName">
            <el-input v-model="drawerForm.yyDepartmentName" placeholder="请输入用友子部门" />
          </el-form-item>
          <el-form-item label="用友子部门编码" prop="yyDepartmentCode">
            <el-input v-model="drawerForm.yyDepartmentCode" placeholder="请输入用友子部门编码" />
          </el-form-item>
          <el-form-item label="系统部门" prop="departmentId">
            <el-select v-model="drawerForm.departmentId" placeholder="请选择预算科目类别" class="w-full">
              <el-option v-for="item in departmentList" :key="'departmentId' + item.id" :label="item.departmentName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-form>
      </template>
    </Drawer>
  </div>
</template>

<script>
import baseFilterTable from '@/mixins/baseFilterTable'
import uploadFiles from '@/mixins/budgetQuert/uploadFiles'
import { exportExcelYsDepartmentControlDemo, exportExcelYsDepartmentControl, importExcelYsDepartmentControl, listYsDepartmentControlPage, listYsDepartment, removeYsDepartmentControl, updateYsDepartmentControl } from '@/api/settings/departmentCompare'
export default {
  name: 'DepartmentCompare', // 部门对照
  components: {},
  mixins: [baseFilterTable, uploadFiles],
  props: {},
  data() {
    return {
      collectSubjects: '', // 采集用友科目
      downloadTemplate: exportExcelYsDepartmentControlDemo, // 下载模板
      importFile: importExcelYsDepartmentControl, // 导入
      exportFile: exportExcelYsDepartmentControl, // 导出
      baseInfo: {
        searchBarShow: true
      },
      tableData: [],
      tableEl: [
        // {
        //   type: 'selection'
        // },
        {
          title: '系统部门',
          dataIndex: 'departmentName'
        },
        {
          title: '系统部门编码',
          dataIndex: 'departmentCode'
        },
        {
          title: '用友子部门',
          dataIndex: 'yyDepartmentName'
        },
        {
          title: '用友子部门编码',
          dataIndex: 'yyDepartmentCode'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          type: 'otherTag',
          align: 'center'
        }
      ],
      elements: [
        {
          label: '系统部门',
          type: 'select',
          options: [],
          key: 'deptId',
          itemValue: 'id',
          itemLabel: 'departmentName',
          value: ''
        },
        {
          label: '用友子部门',
          type: 'input',
          key: 'yyName',
          value: ''
        }
      ],
      departmentList: [], // 系统部门列表
      footerBtns: [
        {
          text: '保存',
          type: 'primary',
          loading: false,
          trigger: 'submit'
        },
        {
          text: '取消',
          type: 'info',
          trigger: 'cancel'
        }
      ],
      drawerForm: {},
      drawerRules: {},
      fileName: '部门对照.xlsx',
      conditionsExport: {}, // 导出条件
      ids: [],
      title: '新增'
    }
  },
  created() {
    this.dropdown()
  },
  mounted() {},
  methods: {
    dropdown() {
      listYsDepartment().then(res => {
        if (res.code === 200) {
          this.elements[0].options = res.data
          this.departmentList = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getData(val) {
      console.log(val)
      this.conditionsExport = val
      const params = {
        num: this.pagination.current,
        size: this.pagination.pageSize,
        deptId: val?.deptId,
        yyName: val?.yyName
      }
      this.tableLoading = true
      listYsDepartmentControlPage(params).then(res => {
        this.tableLoading = false
        if (res.code === 200) {
          this.tableData = res.data.records
          this.pagination.total = res.data.total
        } else {
          this.$message.error(res.message)
        }
      }).catch(() => {
        this.tableLoading = false
      })
    },
    // 新增
    add(row) {
      this.drawerVisible = true
      this.title = '新增'
    },
    // 编辑
    editFun(row) {
      this.title = '编辑'
      this.drawerVisible = true
      this.drawerForm = { ...row }
    },
    removeFun(item) {
      this.$confirm({
        content: '此操作将删除该条记录,并无法恢复, 是否继续?',
        title: '确认提示',
        okFn: () => {
          const params = {
            id: item.id
          }
          removeYsDepartmentControl(params).then(res => {
            if (res.code === 200) {
              this.$message.success(res.message || '操作成功')
              this.$refs.filterForm.submitFormFilter()
            } else {
              this.$message.error(res.message || '操作失败')
            }
          })
        },
        cancelFn: (res) => {
          console.log('取消')
        }
      })
    },
    // 抽屉 提交
    drawerSubmit() {
      console.log(this.drawerForm)
      this.$refs.drawerForm.validate((valid) => {
        if (valid) {
          this.footerBtns[0].loading = true
          updateYsDepartmentControl(this.drawerForm).then(res => {
            this.footerBtns[0].loading = false
            if (res.code === 200) {
              this.getData(this.searchParams)
              this.drawerCancel()
              this.$message.success(res.message || '操作成功')
            } else {
              this.$message.error(res.message || '提交失败')
            }
          }).catch(() => {
            this.footerBtns[0].loading = false
          })
        }
      })
    },
    // 抽屉 关闭
    drawerCancel() {
      this.$refs.drawerForm.resetFields()
      this.drawerVisible = false
      this.drawerForm.id = ''
    },
    // 选中项
    rowSelection(row) {
      this.ids = row.map(item => {
        return item.id
      })
    }
  }
}

</script>

<style lang="less" scoped>
.table-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.red{
  color: #F56C6C;
}
</style>
